/*
 * @Description: 元数据别名列表
 * @Author: Rfan
 * @Date: 2022-05-05 10:49:07
 * @LastEditTime: 2022-08-19 17:14:04
 */

import { useEffect, useMemo, useState } from 'react';
import { Button, Space, Table } from 'antd';
import { useFormatMessage } from '@/utils/intlHelpers';
import { useMetadataAliasContext } from '../contexts/MetadataAliasContext';
import CheckDialog from '../components/dialogs/CheckDialog';
import EditDialog from './dialogs/EditDialog';
import type { IPageQuery } from '@/interfaces/global';
import type { IAliasItem } from '@/interfaces/metadata';

const { Column } = Table;

const PageList = () => {
  const { aliasList, getAliasList, selectItems, setSelectKey, delAliasFunc } =
    useMetadataAliasContext();
  const formatMessage = useFormatMessage();

  // 表格加载
  const [loading, setLoading] = useState(false);
  // 总条目数
  const [total, setTotal] = useState(0);
  // 表格请求参数
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  // 选中的数据
  const [selectData, setSelectData] = useState<IAliasItem>(null);
  // 编辑弹窗展示状态
  const [editDialogVisible, setEditDialogVisible] = useState(false);
  // 查看弹窗展示状态
  const [checkDialogVisible, setCheckDialogVisible] = useState(false);

  useEffect(() => {
    if (listQuery) {
      setLoading(true);
      getAliasList(listQuery)
        .then((res: any) => {
          setTotal(res?.totalCount);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };

  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  /**
   * @description: 打开编辑弹窗
   * @param {IAliasItem} data
   */
  const showEditDialog = (data: IAliasItem) => {
    setSelectData(data);
    setEditDialogVisible(true);
  };

  /**
   * @description: 打开查看弹窗
   * @param {IAliasItem} data
   */
  const showCheckDialog = (data: IAliasItem) => {
    setSelectData(data);
    setCheckDialogVisible(true);
  };

  return (
    <>
      <Table
        dataSource={aliasList}
        loading={loading}
        rowKey="id"
        scroll={{
          x: 'max-content'
        }}
        rowSelection={rowSelection}
        bordered
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="名称" dataIndex="cName" key="cName" align="center" />
        <Column title="KEY" dataIndex="businessKey" key="businessKey" align="center" />
        <Column title="描述" dataIndex="remark" key="remark" align="center" />
        <Column
          title={formatMessage('tableAction')}
          align="center"
          render={(_val, record: any) => (
            <Space>
              {/* 别名不支持删除与修改，暂时屏蔽 */}
              {/* <Button
                type="link"
                danger
                disabled
                onClick={() => {
                  delAliasFunc(record.id, '是否删除该别名');
                }}
              >
                删除
              </Button>
              <Button
                type="link"
                disabled
                onClick={() => {
                  showEditDialog(record);
                }}
              >
                修改
              </Button> */}
              <Button
                type="link"
                onClick={() => {
                  showCheckDialog(record);
                }}
              >
                查看
              </Button>
            </Space>
          )}
        />
      </Table>
      {useMemo(
        () => (
          <EditDialog
            visible={editDialogVisible}
            data={selectData}
            onClose={() => {
              setEditDialogVisible(false);
            }}
          />
        ),
        [editDialogVisible]
      )}
      {useMemo(
        () => (
          <CheckDialog
            visible={checkDialogVisible}
            data={selectData}
            onClose={() => {
              setCheckDialogVisible(false);
            }}
          />
        ),
        [checkDialogVisible]
      )}
    </>
  );
};

export default PageList;
